<template>
  <div class="search-list">
    <div class="headers">
      <Header></Header>
      <div>
        <!--         <ul>
          <li>
            <div>综合</div>
          </li>
          <li>
            <div>价格</div>
            <div class="search-filter">
              <i class="iconfont">&#xe908;</i>
              <i class="iconfont">&#xe907;</i>
            </div>
          </li>
          <li>
            <div>销量</div>
            <div class="search-filter">
              <i class="iconfont">&#xe908;</i>
              <i class="iconfont">&#xe907;</i>
            </div>
          </li>
        </ul> -->
        <!-- 上面整体注释了   下面循环-->
        <ul>
          <!-- 点击后传值 index -->
          <li
            v-for="(item,index) in searchList.data"
            :key='index'
            @click="changeTab(index)"
          >
            <div :class='searchList.currentIndex==index?"active":""'>{{item.name}}</div>
            <!-- 综合按钮不用上下箭头,判断如果是综合则不执行下面 -->
            <div
              class="search-filter"
              v-if='index!=0'
            >
              <i
                class="iconfont"
                :class='item.status==1 ? "active":""'
              >&#xe908;</i>
              <i
                class="iconfont"
                :class='item.status==2 ? "active":""'
              >&#xe907;</i>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 放中间内容 -->
    <section>
      <!-- 放中间内容 -->
      <ul v-if='goodList.length'>

        <li
          v-for="(item,index) in goodList"
          :key='index'
        >
          <!-- :src="'../../'+item.imgUrl"  这个可以 -->
          <!-- :src="item.imgUrl"  这个可以  需要解决的问题：:src 数据绑定下 数组拼接问题 -->
          <img
            v-lazy="item.imgUrl"
            alt="../../assets/images/goods1.jpg"
          >
          <h3>{{item.name}}</h3>
          <div class='price'>
            <div>
              <span>￥</span>
              <b>{{item.price}}</b>
            </div>
            <div>立即购买</div>
          </div>
        </li>
      </ul>
      <h3 v-else>暂无数据.....</h3>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "../../components/search/Hander.vue";
import Tabbar from "../../components/common/Tabbar.vue";
import Indicator from "../../common/api/request.js";
export default {
  data() {
    return {
      goodList: [] /* 摸清 goodList: [] 和 goodList= [] */,
      searchList: {
        currentIndex: 0, //默认是0  控制下标值 哪个会亮
        data: [
          //进行一个循环
          { name: "综合", key: "zh" }, //status: 0 代表不亮
          { name: "价格", status: 0, key: "price" }, //status: 1 代表上箭头亮
          { name: "销量", status: 0, key: "num" }, //status: 2 代表下箭头亮
        ],
      },
    };
  },
  //写一个计算属性
  computed: {
    orderBy() {
      //获取是哪个对象
      let obj = this.searchList.data[this.searchList.currentIndex];
      let val = obj.status == "1" ? "asc" : "desc"; //针对于状态 判断升序降序
      //然后return出去一个结构  obj.key为val
      return {
        [obj.key]: val,
      }; //返回的对象为   {price:desc}  !
    },
  },
  components: {
    Header,
    Tabbar,
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      Indicator.$axios({
        url: "/api/goods/shopList",
        /* 前端要给后端传递的数据 */
        //params: {
        //searchName: this.$route.query.key, this.orderBy,
        /*  this.$route.query.key,this.orderBy就不行*/
        //},
        params: {
          searchName: this.$route.query.key,
          ...this.orderBy /* ...这里三个点是什么意思？？？需要求解 */,
        },
      }).then((res) => {
        this.goodList = res; /* 拿到数据，商品数据 */
        /*         console.log(res); */
      });
    },
    changeTab(index) {
      this.searchList.currentIndex = index;
      /*       this.searchList.data[index].status =
        (this.searchList.data[index].status + 1) % 3; */ /* 不知道哪一个出错了，没反应 */
      /* 点击的下标对应的数据哪一个 */
      let item = this.searchList.data[index];
      /* 取消所有的状态值  都变成0*/
      this.searchList.data.forEach((v, i) => {
        if (i != index) {
          v.status = 0;
        }
      }); /* 不知道哪一个出错了，没反应 */
      //当前的切换
      /*if (index == this.searchList.currentIndex) {
        item.status = item.status == 1 ? 2 : 1;
        这个行/下面也行
      } */
      if (index == this.searchList.currentIndex) {
        item.status = (item.status + 1) % 2;
        if (item.status == 0) {
          item.status = 2;
        }
        /*         console.log(item.status); */
      }
      //发送请求进行数据排序
      this.getData(); //问题  为什么要this.  //懂了，在函数体内//写完这个就已经发送请求了
    },
  },
  //用来监听一下  如果他路由发生改变则再次请求  watch
  watch: {
    $route() {
      this.getData();
    },
  },
};
</script>

<style scoped lang="scss">
/* <style scoped lang="scss">!!!!! */
.search-list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.headers ul {
  display: flex;
  justify-content: space-around;
  padding: 10px 0px 2px 0px;
  font-weight: 600;
  font-size: 16px;
  color: rgb(161, 154, 154) k;
}
.headers ul li {
  display: flex;
  align-items: center; /* 通过这个使得“价格”这个文字选项居中，因为两个符号扩大了位置，所以需要这条代码 */
}
.headers ul li i {
  padding-left: 5px;
}
.headers ul li i:first-child {
  padding-bottom: 2px;
}
.headers ul li .search-filter {
  /* 构建箭头的上下结构 */
  display: flex;
  flex-direction: column;
}
section {
  flex: 1;
  overflow: hidden;
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0px;
    padding: 0px;
  }
}
section ul li {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  justify-items: center;
  padding: 10px;
  box-sizing: border-box; /* 弹性盒子 */
}
section ul li img {
  width: 170px;
  height: 170px;
}
section ul li img [lazy="loading"] {
  width: 170px;
  height: 170px;
  margin: auto;
}
section ul li h3 {
  text-align: center;
  color: brown;
  font-weight: 600;
  width: 100%;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
section ul .price {
  display: flex;
  justify-content: space-between;
  width: 100%; /* 给了宽度才能配合 justify-content: space-between; 把价格和立即购买分散到两边*/
  font-size: 14px;
  padding: 5px 5px 5px 2px;
}
section ul .price div {
  display: flex;
  align-items: center;
}
section ul .price div:last-child {
  /* 覆盖 */
  background-color: red;
  color: #fff;
  padding: 3px 8px;
  border-radius: 50%;
}
/* section ul .price div:first-child span {} span 这样写 */
section ul .price div:first-child span {
  color: red;
}
section ul .price div:first-child b {
  color: red;
}
.active {
  color: red;
}
</style>